

<template>
  <div class="platformRrules">
    <!-- 头部 -->
    <!-- <div class="top">
      <top-info></top-info>
    </div> -->
    <!-- 中间内容 -->
    <div class="content">
      <div class="tips_hitroad">
        <span class="tips" @click="goXSSL"> 新手上路</span>&nbsp;<span
          class="tips"
          >></span
        >&nbsp;&nbsp;<span class="tips" @click="goXSSL">全部</span>&nbsp;<span
          class="tips"
          >></span
        >
        &nbsp;&nbsp;{{ tittle }}
      </div>
      <div class="all_hitInfo">
        <div class="tittle">{{ title }}</div>
        <div class="people">
          <span>{{ createtime }}</span>
          <span style="margin-left: 20px">易可易</span>
        </div>
      </div>

      <div v-if="content">
        <div class="content_text" v-html="content"></div>
      </div>
      <div v-else class="none_list">
        <NoContent></NoContent>
      </div>
    </div>
    <!-- 底部 -->
    <!-- <div class="plat_bottom">
      <home-page-bottom></home-page-bottom>
    </div> -->
  </div>
</template>
    
<script setup>
// import topInfo from "../../components/topInfo.vue";
// import homePageBottom from "../../components/homePageBottom.vue";
import { onMounted, ref } from "vue";
import { PlatformInfoList } from "../../../api/platform";
import blackImg from "../../../assets/images/black.png";
import logoImg from "../../../assets/images/logo.png";
import { useRouter } from "vue-router";
import NoContent from "../../../components/NoContent.vue";
const router = useRouter();
defineProps({
  msg: String,
});
onMounted(() => {
  getPlatformInfoList();
});
const count = ref(0);

const handleSizeChange = (val) => {
  console.log(`${val} items per page`);
};
const tittle = router.currentRoute.value.query.tittle;
const id = router.currentRoute.value.query.id;
// 翻页
const type = ref("3");
const createtime = ref("");
const title = ref("");
console.log("tittle", tittle, id);
const content = ref(null);
const getPlatformInfoList = () => {
  PlatformInfoList(id, type.value).then((res) => {
    console.log("数据", res.data.content);
    content.value = res.data.content.replace(
      /<img/g,
      "<img style='max-width:100%;height:auto;'"
    );
    createtime.value = res.data.createtime;
    title.value = res.data.title;
  });
};
//返回新手上路
const goXSSL = () => {
  router.push("/hit-theroad");
};
</script>
    
<style  lang="less" scoped>
.platformRrules {
  display: flex;
  flex-direction: column;
  // border: 1px solid red;
  // height: 100%;
  width: 100%;
  background: #f5f5f5;
  border-radius: 0px 0px 0px 0px;

  .content {
    // border: 1px solid red;
    width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    .tips_hitroad {
      height: 56px;
      line-height: 56px;
      border-radius: 0px 0px 0px 0px;
      opacity: 1;
      font-size: 14px;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #000000;
      .tips {
        color: #777e90;
        cursor: pointer;
      }
    }
    .all_hitInfo {
      height: 65px;
      background: #ffffff;
      border-radius: 0px 0px 0px 0px;
      opacity: 1;
      border: 1px solid #e6e6e6;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      padding: 0 16px;
      .tittle {
        font-size: 22px;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: bold;
        color: #000000;
        width: 900px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
      }
      .people {
        display: flex;
      }
    }

    .content_text {
      background-color: #fff;
      // height: 98px;
      border-radius: 0px 0px 0px 0px;
      padding: 14px 16px;
      min-height: calc(100vh - 402px);
      // display: flex;
      // flex-direction: column;
      border-bottom: 1px solid #e6e6e6;
      .hitTittle {
        height: 60px;
        width: 100%;
        text-align: center;
        font-size: 22px;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: bold;
        color: #000000;
        line-height: 60px;
      }

      .hitInfo {
        margin-top: 15px;
        font-size: 16px;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #000000;
        line-height: 30px;
      }
    }
    .none_list {
      height: calc(100vh - 372px);
      background: #ffffff;
      border-radius: 0px 0px 0px 0px;
      opacity: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      span {
        font-size: 22px;
        font-weight: 500;
        color: #000000;
      }
    }
  }

  //   .plat_bottom {
  //     margin-top: 25px;
  //   }
}
</style>
    